//--- 骨架屏组件（skeleton） ---//

@import "../../../style/default";

// 基础
.apes-skeleton {
  position: relative;
  overflow: hidden;
  background-color: $skeleton-bg;
  border-radius: $skeleton-border-radius;
  margin: $skeleton-margin;

  &:after {
    background: $skeleton-after-bg;
  }

  &::after {
    content: "";
    animation: apes-skeleton-animation 1.2s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 1;
  }

  // 按钮
  &-button {
    width: $skeleton-button-width;
    height: $skeleton-button-height;

    &.apes-skeleton-button {
      &-circle {
        border-radius: 50%;
        width: $skeleton-button-width/2;
      }

      &-round {
        border-radius: 2rem;
      }

      &-lg {
        width: $skeleton-button-width * $skeleton-lg;
        height: $skeleton-button-height * $skeleton-lg;
      }

      &-sm {
        width: $skeleton-button-width * $skeleton-sm;
        height: $skeleton-button-height * $skeleton-sm;
      }
    }

  }

  // 头像
  &-avatar {
    width: $skeleton-avatar-size;
    height: $skeleton-avatar-size;

    &.apes-skeleton-avatar {
      &-circle {
        border-radius: 50%;
      }

      &-square {
        border-radius: $skeleton-avatar-border-radius;
      }

      &-lg {
        width: $skeleton-avatar-size * $skeleton-lg;
        height: $skeleton-avatar-size * $skeleton-lg;
      }

      &-sm {
        width: $skeleton-avatar-size * $skeleton-sm;
        height: $skeleton-avatar-size * $skeleton-sm;
      }

      &-xs {
        width: $skeleton-avatar-size * $skeleton-xs;
        height: $skeleton-avatar-size * $skeleton-xs;
      }
    }
  }

  // 输入框
  &-input {
    width: $skeleton-input-width;
    height: $skeleton-input-height;
    &.apes-skeleton-input {
      &-lg {
        width: $skeleton-input-width * $skeleton-lg;
        height: $skeleton-input-height * $skeleton-lg;
      }

      &-sm {
        width: $skeleton-input-width * $skeleton-sm;
        height: $skeleton-input-height * $skeleton-sm;
      }
    }
  }

  // 图片
  &-image {
    width: $skeleton-image-size;
    height: $skeleton-image-size;
    padding: $skeleton-image-padding;
    .apes-skeleton-image-path {
      fill: #bfbfbf;
    }

    &.apes-skeleton-image {
      &-lg {
        width: $skeleton-image-size * $skeleton-lg;
        height: $skeleton-image-size * $skeleton-lg;
      }

      &-sm {
        width: $skeleton-image-size * $skeleton-sm;
        height: $skeleton-image-size * $skeleton-sm;
      }
    }
  }

  // 多行列
  &-paragraph {
    width: $skeleton-paragraph-width;
    height: $skeleton-paragraph-height;
    &.apes-skeleton-paragraph {
      &-lg {
        width: $skeleton-paragraph-width * $skeleton-lg;
        height: $skeleton-paragraph-height * $skeleton-lg;
      }

      &-sm {
        width: $skeleton-paragraph-width * $skeleton-sm;
        height: $skeleton-paragraph-height * $skeleton-sm;
      }
    }
  }
}

// 动画显示
.apes-skeleton-none {
  .apes-skeleton::after {
    animation: none;
  }
}

// 动画
@keyframes apes-skeleton-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
